OCPBUGS-56629: use EmptyState for quick starts empty state

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

@@ -550,6 +550,11 @@
   "No PodDisruptionBudget": "No PodDisruptionBudget",
   "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.",
   "Quick starts": "Quick starts",
+  "No {{label}} found": "No {{label}} found",
+  "Configure quick starts to help users get started with your cluster.": "Configure quick starts to help users get started with your cluster.",
+  "Ask a cluster administrator to configure quick starts.": "Ask a cluster administrator to configure quick starts.",
+  "Configure quick starts": "Configure quick starts",
+  "Learn more about quick starts": "Learn more about quick starts",
   "No results found": "No results found",
   "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.",
   "Clear all filters": "Clear all filters",
@@ -587,7 +592,6 @@
   "Your progress will be saved.": "Your progress will be saved.",
   "Copy to clipboard": "Copy to clipboard",
   "Successfully copied to clipboard!": "Successfully copied to clipboard!",
-  "No {{label}} found": "No {{label}} found",
   "Not found": "Not found",
   "No quota": "No quota",
   "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/pdb/AvailabilityRequirementPopover.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { Content, Title, Stack, StackItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { DOC_URL_PODDISRUPTIONBUDGET_POLICY } from '@console/internal/components/utils';
+import {
+  documentationURLs,
+  getDocumentationURL,
+} from '@console/internal/components/utils/documentation';
 import { FieldLevelHelp } from '@console/internal/components/utils/field-level-help';
 import { ExternalLink } from '@console/shared/src/components/links/ExternalLink';
 
@@ -38,8 +41,7 @@ const AvailabilityRequirementPopover: React.FC = () => {
         </StackItem>
         <StackItem>
           <ExternalLink
-            // no downstream URL
-            href={DOC_URL_PODDISRUPTIONBUDGET_POLICY}
+            href={getDocumentationURL(documentationURLs.podDisruptionBudgetPolicyV1)}
             text={t('console-app~PodDisruptionBudget documentation')}
           />
         </StackItem>

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

@@ -5,22 +5,27 @@ import { LoadingBox } from '@console/internal/components/utils';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import QuickStartsLoader from './loader/QuickStartsLoader';
+import { QuickStartEmptyState } from './QuickStartEmptyState';
 
 const QuickStartCatalogPage: React.FC = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('console-app');
   return (
     <>
-      <DocumentTitle>{t('console-app~Quick Starts')}</DocumentTitle>
+      <DocumentTitle>{t('Quick Starts')}</DocumentTitle>
       <PageHeading
-        title={t('console-app~Quick Starts')}
+        title={t('Quick Starts')}
         helpText={t(
-          'console-app~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.',
         )}
       />
       <QuickStartsLoader>
         {(quickStarts, loaded) =>
           loaded ? (
-            <PfQuickStartCatalogPage showTitle={false} quickStarts={quickStarts} showFilter />
+            quickStarts.length > 0 ? (
+              <PfQuickStartCatalogPage showTitle={false} quickStarts={quickStarts} showFilter />
+            ) : (
+              <QuickStartEmptyState />
+            )
           ) : (
             <LoadingBox />
           )

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

@@ -152,7 +152,11 @@ const QuickStartConfiguration: React.FC<{ readonly: boolean }> = ({ readonly })
   };
 
   return (
-    <FormSection title={t('console-app~Quick starts')} data-test="quickstarts form-section">
+    <FormSection
+      title={t('console-app~Quick starts')}
+      data-test="quickstarts form-section"
+      id="quick-starts-configuration"
+    >
       <DualListSelector
         availableOptionsTitle={t('console-app~Enabled')}
         chosenOptionsTitle={t('console-app~Disabled')}

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

@@ -0,0 +1,85 @@
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateActions,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  Skeleton,
+} from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
+import { useTranslation } from 'react-i18next';
+import { QuickStartModel } from '@console/app/src/models';
+import { useAccessReview } from '@console/dynamic-plugin-sdk/src/app/components/utils/rbac';
+import { getReferenceForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s';
+import {
+  documentationURLs,
+  getDocumentationURL,
+} from '@console/internal/components/utils/documentation';
+import { LinkTo } from '@console/shared/src/components/links/LinkTo';
+
+export const QuickStartEmptyState = () => {
+  const { t } = useTranslation('console-app');
+
+  const [canAddQuickStarts, loading] = useAccessReview({
+    group: QuickStartModel.apiGroup,
+    resource: QuickStartModel.kind,
+    verb: 'create',
+  });
+
+  return (
+    <EmptyState
+      titleText={t('No {{label}} found', { label: QuickStartModel.labelPlural })}
+      headingLevel="h4"
+      icon={loading ? Skeleton : canAddQuickStarts ? WrenchIcon : CubesIcon}
+      variant={EmptyStateVariant.lg}
+    >
+      {!loading ? (
+        <>
+          <EmptyStateBody>
+            {canAddQuickStarts
+              ? t('Configure quick starts to help users get started with your cluster.')
+              : t('Ask a cluster administrator to configure quick starts.')}
+          </EmptyStateBody>
+          {canAddQuickStarts && (
+            <EmptyStateFooter>
+              <EmptyStateActions>
+                <Button
+                  variant="primary"
+                  component={LinkTo('/cluster-configuration#quick-starts-configuration')}
+                >
+                  {t('Configure quick starts')}
+                </Button>
+              </EmptyStateActions>
+              <EmptyStateActions>
+                <Button
+                  variant="link"
+                  component={LinkTo(`/k8s/cluster/${getReferenceForModel(QuickStartModel)}/~new`)}
+                >
+                  {t('Create {{kind}}', { kind: QuickStartModel.kind })}
+                </Button>
+                <Button
+                  variant="link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  component="a"
+                  href={getDocumentationURL(documentationURLs.creatingQuickStartsTutorial)}
+                  iconPosition="right"
+                  icon={<ExternalLinkAltIcon />}
+                >
+                  {t('Learn more about quick starts')}
+                </Button>
+              </EmptyStateActions>
+            </EmptyStateFooter>
+          )}
+        </>
+      ) : (
+        <EmptyStateBody>
+          <Skeleton />
+        </EmptyStateBody>
+      )}
+    </EmptyState>
+  );
+};

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

@@ -7,6 +7,7 @@ import { WatchK8sResultsObject } from '@console/dynamic-plugin-sdk';
 import { k8sListResourceItems } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { getGitService, GitProvider } from '@console/git-service/src';
 import { evaluateFunc } from '@console/git-service/src/utils/serverless-strategy-detector';
+import { DOC_URL_SERVERLESS_FUNCTIONS_GETTING_STARTED } from '@console/internal/components/utils/documentation';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { ServerlessBuildStrategyType } from '@console/knative-plugin/src/types';
 import PipelineSection from '@console/pipelines-plugin/src/components/import/pipeline/PipelineSection';
@@ -41,9 +42,6 @@ enum SupportedRuntime {
   quarkus = 'java',
 }
 
-export const SERVERLESS_FUNCTION_DOCS_URL =
-  'https://docs.openshift.com/serverless/latest/functions/serverless-functions-getting-started.html';
-
 const AddServerlessFunctionForm: React.FC<
   FormikProps<FormikValues> & AddServerlessFunctionFormProps
 > = ({
@@ -188,7 +186,7 @@ const AddServerlessFunctionForm: React.FC<
                   </p>
                   <ExternalLink
                     additionalClassName="odc-func-form-link"
-                    href={SERVERLESS_FUNCTION_DOCS_URL}
+                    href={DOC_URL_SERVERLESS_FUNCTIONS_GETTING_STARTED}
                     text={t('devconsole~Learn more')}
                   />
                 </Alert>

frontend/public/components/utils/documentation.tsx

@@ -5,11 +5,16 @@ export const openshiftHelpBase = window.SERVER_FLAGS.documentationBaseURL || UPS
 
 export const DOC_URL_OPENSHIFT_WHATS_NEW = 'https://www.openshift.com/learn/whats-new';
 export const DOC_URL_OPERATORFRAMEWORK_SDK = 'https://sdk.operatorframework.io/';
-export const DOC_URL_PODDISRUPTIONBUDGET_POLICY = `${UPSTREAM_LATEST}rest_api/policy_apis/poddisruptionbudget-policy-v1.html#poddisruptionbudget-policy-v1`;
 export const DOC_URL_PODMAN = 'https://podman.io/';
 export const DOC_URL_RED_HAT_MARKETPLACE =
   'https://marketplace.redhat.com/en-us?utm_source=openshift_console';
 
+// documentationBaseUrl points to OCP and not Serverless so we cannot use it
+const OPENSHIFT_SERVERLESS_DOCS =
+  'https://docs.redhat.com/en/documentation/red_hat_openshift_serverless/latest/';
+// no OKD equivalent docs either
+export const DOC_URL_SERVERLESS_FUNCTIONS_GETTING_STARTED = `${OPENSHIFT_SERVERLESS_DOCS}html/functions/serverless-functions-getting-started`;
+
 const KUBE_DOCS = 'https://kubernetes.io/docs/';
 export const DOC_URL_STORAGE_CLASSES_AWS_EBS = `${KUBE_DOCS}/concepts/storage/storage-classes/#aws-ebs`;
 export const DOC_URL_STORAGE_CLASSES_AZURE_DISK = `${KUBE_DOCS}/concepts/storage/storage-classes/#azure-disk`;
@@ -84,6 +89,16 @@ export const documentationURLs: documentationURLsType = {
     kube: `${KUBE_DOCS}/reference/access-authn-authz/extensible-admission-controllers/#response`,
     upstream: 'architecture/index.html#about-admission-plug-ins',
   },
+  creatingQuickStartsTutorials: {
+    downstream: 'html/web_console/creating-quick-start-tutorials',
+    upstream: 'web_console/creating-quick-start-tutorials.html',
+  },
+  podDisruptionBudgetPolicyV1: {
+    downstream: 'html/policy_apis/poddisruptionbudget-policy-v1',
+    kube: `${KUBE_DOCS}/reference/kubernetes-api/policy-resources/pod-disruption-budget-v1/`,
+    upstream:
+      'rest_api/policy_apis/poddisruptionbudget-policy-v1.html#poddisruptionbudget-policy-v1',
+  },
 };
 
 export const isUpstream = () => window.SERVER_FLAGS.branding === 'okd';