Update Event Source & Channel Sources for Add flow

frontend/packages/knative-plugin/src/plugin.tsx

@@ -40,12 +40,8 @@ import {
 } from './utils/get-knative-resources';
 import { getKebabActionsForKind } from './utils/kebab-actions';
 import {
-  fetchEventSourcesCrd,
-  fetchChannelsCrd,
   getDynamicEventSourcesResourceList,
   getDynamicChannelResourceList,
-  hideDynamicEventSourceCard,
-  hideDynamicChannelCard,
 } from './utils/fetch-dynamic-eventsources-utils';
 import { TopologyConsumedExtensions, topologyPlugin } from './topology/topology-plugin';
 import * as eventSourceIcon from './imgs/event-source.svg';
@@ -67,9 +63,6 @@ type ConsumedExtensions =
   | AddAction
   | TopologyConsumedExtensions;
 
-// Added it to perform discovery of Dynamic event sources on cluster on app load as kebab option needed models upfront
-fetchEventSourcesCrd();
-fetchChannelsCrd();
 const plugin: Plugin<ConsumedExtensions> = [
   {
     type: 'ModelDefinition',
@@ -408,7 +401,6 @@ const plugin: Plugin<ConsumedExtensions> = [
       description:
         'Create an event source to register interest in a class of events from a particular system',
       icon: eventSourceIcon,
-      hide: hideDynamicEventSourceCard,
     },
   },
   {
@@ -423,7 +415,6 @@ const plugin: Plugin<ConsumedExtensions> = [
       description:
         'Create a Knative Channel to create an event forwarding and persistence layer with in-memory and reliable implementations',
       icon: channelIcon,
-      hide: hideDynamicChannelCard,
     },
   },
   ...topologyPlugin,

frontend/packages/knative-plugin/src/topology/topology-plugin.ts

@@ -35,8 +35,14 @@ import {
 import {
   getDynamicEventSourcesWatchers,
   getDynamicEventingChannelWatchers,
+  fetchEventSourcesCrd,
+  fetchChannelsCrd,
 } from '../utils/fetch-dynamic-eventsources-utils';
 
+// Added it to perform discovery of Dynamic event sources on cluster on app load as kebab option needed models upfront
+fetchEventSourcesCrd();
+fetchChannelsCrd();
+
 export const getKnativeResources = (namespace: string) => {
   return {
     ...knativeServingResourcesRevisionWatchers(namespace),

frontend/packages/knative-plugin/src/utils/create-channel-utils.ts

@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import { safeLoad } from 'js-yaml';
 import { checkAccess } from '@console/internal/components/utils';
 import { useSafetyFirst } from '@console/internal/components/safety-first';
-import { getDynamicChannelModelRefs } from './fetch-dynamic-eventsources-utils';
+import { useChannelResourcesList } from './fetch-dynamic-eventsources-utils';
 import {
   getGroupVersionKind,
   modelFor,
@@ -36,38 +36,41 @@ export const getChannelKind = (ref: string): string => {
 
 export const useChannelList = (namespace: string): ChannelListProps => {
   const [accessData, setAccessData] = useSafetyFirst({ loaded: false, channelList: [] });
-  const channelResourcesList = getDynamicChannelModelRefs();
-  const accessList = [];
+  const { channels, loaded: channelsLoaded } = useChannelResourcesList();
   React.useEffect(() => {
-    _.forIn(channelResourcesList, (channelRef: string) => {
-      if (isGroupVersionKind(channelRef)) {
-        const [group] = getGroupVersionKind(channelRef) ?? [];
-        const { plural } = modelFor(channelRef) || {};
-        accessList.push(
-          checkAccess({
-            group,
-            resource: plural,
-            namespace,
-            verb: 'create',
-          }).then((result) => (result.status.allowed ? channelRef : '')),
-        );
-      }
-    });
-    Promise.all(accessList)
-      .then((results) => {
-        const channelList = results.reduce((acc, result) => {
-          if (result.length > 0) {
-            return [...acc, result];
-          }
-          return acc;
-        }, []);
+    const accessList = [];
+    if (channelsLoaded) {
+      _.forIn(channels, (channelRef: string) => {
+        if (isGroupVersionKind(channelRef)) {
+          const [group] = getGroupVersionKind(channelRef) ?? [];
+          const { plural } = modelFor(channelRef) || {};
+          accessList.push(
+            checkAccess({
+              group,
+              resource: plural,
+              namespace,
+              verb: 'create',
+            }).then((result) => (result.status.allowed ? channelRef : '')),
+          );
+        }
+      });
+      Promise.all(accessList)
+        .then((results) => {
+          const channelList = results.reduce((acc, result) => {
+            if (result.length > 0) {
+              return [...acc, result];
+            }
+            return acc;
+          }, []);
 
-        setAccessData({ loaded: true, channelList });
-      })
-      // eslint-disable-next-line no-console
-      .catch((err) => console.warn(err.message));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+          setAccessData({ loaded: true, channelList });
+        })
+        .catch((err) =>
+          // eslint-disable-next-line no-console
+          console.warn('Error while checking create access for channels', err.message),
+        );
+    }
+  }, [namespace, channels, channelsLoaded, setAccessData]);
 
   return accessData;
 };

frontend/packages/knative-plugin/src/utils/fetch-dynamic-eventsources-utils.ts

@@ -18,6 +18,11 @@ const eventSourceData: EventSourcetData = {
   eventSourceChannels: [],
 };
 
+interface EventChannelData {
+  loaded: boolean;
+  channels: string[];
+}
+
 export const fetchEventSourcesCrd = async () => {
   const url = 'api/console/knative-event-sources';
   try {
@@ -76,7 +81,7 @@ export const fetchEventSourcesCrd = async () => {
 export const useEventSourceModels = (): EventSourcetData => {
   const [modelsData, setModelsData] = useSafetyFirst({ loaded: false, eventSourceModels: [] });
   useEffect(() => {
-    if (!eventSourceData.loaded) {
+    if (eventSourceData.eventSourceModels.length === 0) {
       fetchEventSourcesCrd()
         .then((data) => {
           setModelsData({ loaded: true, eventSourceModels: data });
@@ -137,9 +142,6 @@ export const isDynamicEventResourceKind = (resourceRef: string): boolean => {
   return index !== -1;
 };
 
-export const hideDynamicEventSourceCard = () =>
-  eventSourceData.eventSourceModels && eventSourceData.eventSourceModels.length > 0;
-
 export const fetchChannelsCrd = async () => {
   const url = 'api/console/knative-channels';
   try {
@@ -206,14 +208,41 @@ export const getDynamicEventingChannelWatchers = (namespace: string) => {
     return acc;
   }, {});
 };
+export const useChannelResourcesList = (): EventChannelData => {
+  const [modelRefs, setModelRefs] = useSafetyFirst<EventChannelData>({
+    channels: [],
+    loaded: false,
+  });
+  useEffect(() => {
+    if (eventSourceData.eventSourceChannels.length === 0) {
+      fetchChannelsCrd()
+        .then((data) => {
+          setModelRefs({
+            channels: data.map((model: K8sKind) => referenceForModel(model)),
+            loaded: true,
+          });
+        })
+        .catch((err) => {
+          setModelRefs({ channels: [], loaded: true });
+          // eslint-disable-next-line no-console
+          console.warn('Error fetching CRDs for dynamic channel model refs', err);
+        });
+    } else {
+      setModelRefs({
+        channels: eventSourceData.eventSourceChannels.map((model: K8sKind) =>
+          referenceForModel(model),
+        ),
+        loaded: true,
+      });
+    }
+  }, [setModelRefs]);
+  return modelRefs;
+};
 
 export const getDynamicChannelModelRefs = (): string[] => {
   return eventSourceData.eventSourceChannels.map((model: K8sKind) => referenceForModel(model));
 };
 
-export const hideDynamicChannelCard = () =>
-  eventSourceData.eventSourceChannels && eventSourceData.eventSourceChannels.length > 0;
-
 export const isEventingChannelResourceKind = (resourceRef: string): boolean => {
   const index = eventSourceData.eventSourceChannels.findIndex(
     (model: K8sKind) => referenceForModel(model) === resourceRef,