Added Getting started with Functions for functions list page

frontend/packages/dev-console/console-extensions.json

@@ -252,27 +252,47 @@
     "properties": {
       "id": "developer-catalog",
       "name": "%devconsole~Developer Catalog%",
-      "insertBefore": "git-repository"
+      "insertBefore": "serverless-function"
     },
     "flags": {
       "required": ["DEVELOPER_CATALOG"]
     }
   },
+  {
+    "type": "dev-console.add/action-group",
+    "properties": {
+      "id": "eventing",
+      "name": "%devconsole~Eventing%",
+      "insertAfter": "developer-catalog"
+    },
+    "flags": {
+      "required": ["KNATIVE_EVENTING", "FLAG_KNATIVE_EVENTING_ENABLED"]
+    }
+  },
+  {
+    "type": "dev-console.add/action-group",
+    "properties": {
+      "id": "serverless-function",
+      "name": "%devconsole~Serverless function%",
+      "insertAfter": "eventing",
+      "insertBefore": "git-repository",
+      "icon": { "$codeRef": "icons.serverlessFunctionSVG" }
+    }
+  },
   {
     "type": "dev-console.add/action-group",
     "properties": {
       "id": "git-repository",
       "name": "%devconsole~Git Repository%",
       "insertBefore": "container-images",
-      "insertAfter": "developer-catalog"
+      "insertAfter": "serverless-function"
     }
   },
   {
     "type": "dev-console.add/action-group",
     "properties": {
       "id": "container-images",
       "name": "%devconsole~Container images%",
-      "insertBefore": "eventing",
       "insertAfter": "git-repository"
     }
   },
@@ -281,8 +301,7 @@
     "properties": {
       "id": "local-machine",
       "name": "%devconsole~From Local Machine%",
-      "insertBefore": "pipelines",
-      "insertAfter": "eventing"
+      "insertBefore": "pipelines"
     }
   },
   {

frontend/packages/dev-console/locales/en/devconsole.json

@@ -9,6 +9,8 @@
   "Developer Catalog Types": "Developer Catalog Types",
   "A list of developer catalog types that are not shown to users.": "A list of developer catalog types that are not shown to users.",
   "Developer Catalog": "Developer Catalog",
+  "Eventing": "Eventing",
+  "Serverless function": "Serverless function",
   "Git Repository": "Git Repository",
   "Container images": "Container images",
   "From Local Machine": "From Local Machine",
@@ -74,6 +76,7 @@
   "Container Image": "Container Image",
   "From Catalog": "From Catalog",
   "Create Serverless function": "Create Serverless function",
+  "Serverless function using Samples": "Serverless function using Samples",
   "Delete application": "Delete application",
   "Delete {{kind}}": "Delete {{kind}}",
   "Edit {{applicationName}}": "Edit {{applicationName}}",
@@ -559,11 +562,6 @@
   "Resource type to generate. The default can be set in <2>User Preferences</2>.": "Resource type to generate. The default can be set in <2>User Preferences</2>.",
   "func.yaml is not present and builder strategy is not s2i": "func.yaml is not present and builder strategy is not s2i",
   "func.yaml must be present and builder strategy should be s2i to create a Serverless function": "func.yaml must be present and builder strategy should be s2i to create a Serverless function",
-  "VSCode": "VSCode",
-  "The OpenShift Serverless Functions support in the VSCode IDE extension enables developers to effortlessly create, build, run, invoke and deploy serverless functions on OpenShift, providing a seamless development experience within the familiar VSCode environment.": "The OpenShift Serverless Functions support in the VSCode IDE extension enables developers to effortlessly create, build, run, invoke and deploy serverless functions on OpenShift, providing a seamless development experience within the familiar VSCode environment.",
-  "Provided by Red Hat": "Provided by Red Hat",
-  "IntelliJ": "IntelliJ",
-  "A plugin for working with Knative on a OpenShift or Kubernetes cluster. This plugin allows developers to view and deploy their applications in a serverless way.": "A plugin for working with Knative on a OpenShift or Kubernetes cluster. This plugin allows developers to view and deploy their applications in a serverless way.",
   "Support for {{runtime}} is not yet available.": "Support for {{runtime}} is not yet available.",
   "Unsupported Runtime detected. Please update the Repository URL or change the Build Strategy to continue.": "Unsupported Runtime detected. Please update the Repository URL or change the Build Strategy to continue.",
   "Builder Image {{image}} is not present.": "Builder Image {{image}} is not present.",

frontend/packages/dev-console/src/actions/add-resources.tsx

@@ -159,6 +159,7 @@ export const AddActions: { [name: string]: ActionFactory } = {
     path,
     disabled: accessReviewDisabled,
   }),
+  // Tech debt: ODC-7413: Move Serverless specific actions and providers from devconsole into knative-pluigin
   CreateServerlessFunction: (
     namespace,
     application,
@@ -180,6 +181,27 @@ export const AddActions: { [name: string]: ActionFactory } = {
     path,
     disabled: accessReviewDisabled,
   }),
+  CreateServerlessFunctionUsingSamples: (
+    namespace,
+    application,
+    contextSource,
+    path,
+    accessReviewDisabled,
+  ) => ({
+    id: 'create-serverless-function-samples',
+    label: i18next.t('devconsole~Serverless function using Samples'),
+    icon: <ServerlessFunctionIcon style={eventIconStyle} />,
+    cta: {
+      href: resolvedURLWithParams(
+        '/samples/ns/:namespace?sampleType=Serverless function',
+        namespace,
+        application,
+        contextSource,
+      ),
+    },
+    path,
+    disabled: accessReviewDisabled,
+  }),
 };
 
 const disabledAddActions = getDisabledAddActions();

frontend/packages/dev-console/src/actions/providers.tsx

@@ -177,6 +177,7 @@ export const useTopologyGraphActionProvider: TopologyActionProvider = ({
         ),
       );
     }
+    // Tech debt: ODC-7413: Move Serverless specific actions and providers from devconsole into knative-pluigin
     if (isServerlessEnabled) {
       actionsWithSourceRef.push(
         AddActions.CreateServerlessFunction(
@@ -186,6 +187,13 @@ export const useTopologyGraphActionProvider: TopologyActionProvider = ({
           '',
           !isCatalogImageResourceAccess,
         ),
+        AddActions.CreateServerlessFunctionUsingSamples(
+          namespace,
+          undefined,
+          sourceReference,
+          '',
+          !isCatalogImageResourceAccess,
+        ),
       );
     }
 
@@ -244,6 +252,7 @@ export const useTopologyGraphActionProvider: TopologyActionProvider = ({
         ),
       );
     }
+    // Tech debt: ODC-7413: Move Serverless specific actions and providers from devconsole into knative-pluigin
     if (isServerlessEnabled) {
       actionsWithoutSourceRef.push(
         AddActions.CreateServerlessFunction(
@@ -253,6 +262,13 @@ export const useTopologyGraphActionProvider: TopologyActionProvider = ({
           ADD_TO_PROJECT,
           !isCatalogImageResourceAccess,
         ),
+        AddActions.CreateServerlessFunctionUsingSamples(
+          namespace,
+          undefined,
+          undefined,
+          ADD_TO_PROJECT,
+          !isCatalogImageResourceAccess,
+        ),
       );
     }
 
@@ -345,6 +361,7 @@ export const useTopologyApplicationActionProvider: TopologyActionProvider = ({
               ),
             ]
           : []),
+        // Tech debt: ODC-7413: Move Serverless specific actions and providers from devconsole into knative-pluigin
         ...(isServerlessEnabled
           ? [
               AddActions.CreateServerlessFunction(
@@ -354,6 +371,13 @@ export const useTopologyApplicationActionProvider: TopologyActionProvider = ({
                 path,
                 !isCatalogImageResourceAccess,
               ),
+              AddActions.CreateServerlessFunctionUsingSamples(
+                namespace,
+                application,
+                sourceReference,
+                path,
+                !isCatalogImageResourceAccess,
+              ),
             ]
           : []),
       ].filter(disabledActionsFilter);

frontend/packages/dev-console/src/components/import/GitImportForm.tsx

@@ -15,8 +15,6 @@ import GitSection from './git/GitSection';
 import { BuildOptions, GitImportFormProps, ImportTypes } from './import-types';
 import ImportStrategySection from './ImportStrategySection';
 import { BuildSection } from './section/BuildSection';
-import ExtensionCards from './serverless-function/ExtensionCards';
-import './serverless-function/AddServerlessFunctionForm.scss';
 
 const GitImportForm: React.FC<FormikProps<FormikValues> & GitImportFormProps> = ({
   values,
@@ -50,8 +48,6 @@ const GitImportForm: React.FC<FormikProps<FormikValues> & GitImportFormProps> =
     importType !== ImportTypes.devfile &&
     values.import.selectedStrategy.type !== ImportStrategy.DEVFILE &&
     !isSample;
-  const showExtensionCards =
-    values.import.selectedStrategy.type === ImportStrategy.SERVERLESS_FUNCTION && isSample;
 
   return (
     <form onSubmit={handleSubmit} data-test-id="import-git-form">
@@ -98,12 +94,6 @@ const GitImportForm: React.FC<FormikProps<FormikValues> & GitImportFormProps> =
             )}
           </FormBody>
         </FlexItem>
-        <FlexItem
-          flex={{ default: 'flex_1' }}
-          className="pf-u-display-none pf-u-display-flex-on-lg"
-        >
-          {showExtensionCards && <ExtensionCards />}
-        </FlexItem>
       </Flex>
       <FormFooter
         handleReset={handleReset}

frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Helmet from 'react-helmet';
 import { Trans, useTranslation } from 'react-i18next';
 import { RouteComponentProps } from 'react-router';
+import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
 import { CatalogController, CatalogServiceProvider } from '@console/shared';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import CreateProjectListPage, { CreateAProjectButton } from '../projects/CreateProjectListPage';
@@ -11,6 +12,12 @@ type SampleCatalogProps = RouteComponentProps<{ ns?: string }>;
 const SampleCatalog: React.FC<SampleCatalogProps> = ({ match }) => {
   const { t } = useTranslation();
   const namespace = match.params.ns;
+  const params = new URLSearchParams(window.location.search);
+  const sampleType = params.get('sampleType');
+  const labelFilter: Record<string, string> = {
+    label: 'sample-type',
+    value: sampleType,
+  };
   return (
     <>
       <Helmet>
@@ -19,16 +26,31 @@ const SampleCatalog: React.FC<SampleCatalogProps> = ({ match }) => {
       <NamespacedPage variant={NamespacedPageVariants.light} hideApplications>
         {namespace ? (
           <CatalogServiceProvider namespace={namespace} catalogId="samples-catalog">
-            {(service) => (
-              <CatalogController
-                {...service}
-                hideSidebar
-                title={t('devconsole~Samples')}
-                description={t(
-                  'devconsole~Get Started using applications by choosing a code sample.',
-                )}
-              />
-            )}
+            {(service) => {
+              let filteredLists: CatalogItem[];
+              if (sampleType) {
+                filteredLists = service.items.filter((item) => {
+                  return (
+                    item?.typeLabel === labelFilter?.value ||
+                    item?.data?.metadata?.labels[labelFilter?.label] === labelFilter?.value
+                  );
+                });
+              } else {
+                filteredLists = service.items;
+              }
+              const catalogItems = { ...service, items: filteredLists };
+
+              return (
+                <CatalogController
+                  {...catalogItems}
+                  hideSidebar
+                  title={t('devconsole~Samples')}
+                  description={t(
+                    'devconsole~Get Started using applications by choosing a code sample.',
+                  )}
+                />
+              );
+            }}
           </CatalogServiceProvider>
         ) : (
           <CreateProjectListPage title={t('devconsole~Samples')}>

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

@@ -24,9 +24,7 @@ import { notSupportedRuntime } from '../../../utils/serverless-functions';
 import AdvancedSection from '../advanced/AdvancedSection';
 import AppSection from '../app/AppSection';
 import GitSection from '../git/GitSection';
-import ExtensionCards from './ExtensionCards';
 import ServerlessFunctionStrategySection from './ServerlessFunctionStrategySection';
-import './AddServerlessFunctionForm.scss';
 
 type AddServerlessFunctionFormProps = {
   builderImages?: NormalizedBuilderImages;
@@ -157,12 +155,6 @@ const AddServerlessFunctionForm: React.FC<
               )}
           </FormBody>
         </FlexItem>
-        <FlexItem
-          flex={{ default: 'flex_1' }}
-          className="pf-u-display-none pf-u-display-flex-on-lg"
-        >
-          <ExtensionCards />
-        </FlexItem>
       </Flex>
       <FormFooter
         handleReset={handleReset}