add support for Operator Backed SBR through topology inContext

remove comment

address review comments

address review comments

address review comments

address review comments

support service binding connector for yaml view

frontend/__tests__/components/catalog.spec.tsx

@@ -28,6 +28,10 @@ import { developerCatalogItems, groupedByOperator } from './catalog-data';
 import { categorizeItems } from '../../public/components/utils/tile-view-page';
 import { Dropdown } from '../../public/components/utils';
 
+jest.mock('react-router-dom', () => ({
+  ...require.requireActual('react-router-dom'),
+  useLocation: () => ({ location: 'https://abcd.com', search: 'foo=bar&a=b' }),
+}));
 describe(CatalogTileViewPage.displayName, () => {
   let wrapper: ReactWrapper<CatalogListPageProps, CatalogListPageState>;
 

frontend/packages/console-plugin-sdk/src/typings/post-form-submit.ts

@@ -5,7 +5,7 @@ namespace ExtensionProperties {
     /** action type */
     type: string;
     /** callback for the related action */
-    callback: (arg: T, payload?: P) => void;
+    callback: (arg: T, payload?: P) => Promise<T>;
   }
 }
 

frontend/packages/console-shared/src/hoc/index.ts

@@ -0,0 +1 @@
+export * from './withPostFormSubmissionCallback';

frontend/packages/console-shared/src/hoc/withPostFormSubmissionCallback.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { K8sResourceCommon } from '@console/internal/module/k8s';
+import { usePostFormSubmitAction } from '../hooks/post-form-submit-action';
+
+type WithPostFormSubmissionCallbackProps<R> = {
+  postFormSubmissionCallback: (arg: R) => Promise<R>;
+};
+
+export const withPostFormSubmissionCallback = <
+  Props extends WithPostFormSubmissionCallbackProps<R>,
+  R = K8sResourceCommon
+>(
+  Component: React.ComponentType<Props>,
+): React.FC<Omit<Props, keyof WithPostFormSubmissionCallbackProps<R>>> => (props: Props) => {
+  const postFormSubmissionCallback = usePostFormSubmitAction<R>();
+  return <Component {...props} postFormSubmissionCallback={postFormSubmissionCallback} />;
+};

frontend/packages/console-shared/src/hooks/index.ts

@@ -11,3 +11,4 @@ export * from './version';
 export * from './csv-watch-hook';
 export * from './useTabbedTableBreadcrumb';
 export * from './post-form-submit-action';
+export * from './flag';

frontend/packages/console-shared/src/hooks/post-form-submit-action.ts

@@ -9,7 +9,7 @@ import { useQueryParams } from './useQueryParams';
 
 export const usePostFormSubmitAction = <R = K8sResourceCommon[]>(
   key: string = 'action',
-): ((arg: R) => void) => {
+): ((arg: R) => Promise<R>) => {
   const params = useQueryParams();
   const actionParams = params.get(key);
 
@@ -40,16 +40,19 @@ export const usePostFormSubmitAction = <R = K8sResourceCommon[]>(
   );
 
   const formCallback = useCallback(
-    (arg: R) => {
+    async (arg: R) => {
       if (filteredExtensions.length > 0) {
-        filteredExtensions.forEach(({ properties: { type, callback } }) => {
-          if (actionPayload[type]) {
-            callback(arg, actionPayload[type]);
-          } else {
-            callback(arg);
-          }
-        });
+        await Promise.all(
+          filteredExtensions.map(async ({ properties: { type, callback } }) => {
+            if (actionPayload[type]) {
+              await callback(arg, actionPayload[type]);
+            } else {
+              await callback(arg);
+            }
+          }),
+        );
       }
+      return arg;
     },
     [filteredExtensions, actionPayload],
   );

frontend/packages/console-shared/src/hooks/useQueryParams.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useQueryParams = () => {
+  const { search } = useLocation();
+  return React.useMemo(() => new URLSearchParams(search), [search]);
+};
+
+export type WithQueryParamsProps = {
+  queryParams: URLSearchParams;
+};
+
+export const withQueryParams = <Props extends WithQueryParamsProps>(
+  Component: React.ComponentType<Props>,
+): React.FC<Omit<Props, keyof WithQueryParamsProps>> => (props: Props) => {
+  const queryParams = useQueryParams();
+  return <Component {...props} queryParams={queryParams} />;
+};

frontend/packages/console-shared/src/index.ts

@@ -7,3 +7,4 @@ export * from './types';
 export * from './utils';
 export * from './hooks';
 export * from './sorts';
+export * from './hoc';

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

@@ -14,6 +14,7 @@ import HelmChartsIcon from '../components/helm/HelmChartsIcon';
 
 export const allImportResourceAccess = 'allImportResourceAccess';
 export const allCatalogImageResourceAccess = 'allCatalogImageResourceAccess';
+export const serviceBindingAvailable = 'serviceBindingAvailable';
 
 export const fromGit = createKebabAction(
   'From Git',
@@ -54,6 +55,7 @@ export const fromOperatorBacked = createKebabAction(
   'Operator Backed',
   <BoltIcon />,
   ImportOptions.OPERATORBACKED,
+  serviceBindingAvailable,
 );
 
 export const fromHelmCharts = createKebabAction(
@@ -77,4 +79,5 @@ export const addResourceMenuWithoutCatalog: KebabAction[] = [
   fromGit,
   containerImage,
   fromDockerfile,
+  fromOperatorBacked,
 ];

frontend/packages/dev-console/src/components/topology/actions/__tests__/graphActions.spec.tsx

@@ -16,7 +16,7 @@ describe('graphActions: ', () => {
       createResourceAccess: [allCatalogImageResourceAccess, allImportResourceAccess],
     };
     const actions = graphActions(graphData);
-    expect(actions).toHaveLength(8);
+    expect(actions).toHaveLength(7);
   });
 
   it('should return the correct menu items when all only import resources are allowed', () => {
@@ -26,7 +26,7 @@ describe('graphActions: ', () => {
       createResourceAccess: [allImportResourceAccess],
     };
     const actions = graphActions(graphData);
-    expect(actions).toHaveLength(7);
+    expect(actions).toHaveLength(6);
   });
 
   it('should return the correct menu items when minimal resources are allowed', () => {
@@ -36,7 +36,7 @@ describe('graphActions: ', () => {
       createResourceAccess: [],
     };
     const actions = graphActions(graphData);
-    expect(actions).toHaveLength(5);
+    expect(actions).toHaveLength(4);
   });
 
   it('should return the correct menu items when connector source is passed and event source is disabled', () => {
@@ -73,7 +73,7 @@ describe('graphActions: ', () => {
       createResourceAccess: [allCatalogImageResourceAccess, allImportResourceAccess],
     };
     const actions = graphActions(graphData);
-    expect(actions).toHaveLength(10);
+    expect(actions).toHaveLength(9);
   });
 
   it('should return the correct number of items when all permission are not allowed and eventSource is enabled', () => {
@@ -83,6 +83,6 @@ describe('graphActions: ', () => {
       createResourceAccess: [],
     };
     const actions = graphActions(graphData);
-    expect(actions).toHaveLength(7);
+    expect(actions).toHaveLength(6);
   });
 });

frontend/packages/dev-console/src/components/topology/operators/operatorsTopologyPlugin.ts

@@ -1,4 +1,4 @@
-import { Plugin } from '@console/plugin-sdk';
+import { Plugin, PostFormSubmissionAction } from '@console/plugin-sdk';
 import {
   TopologyComponentFactory,
   TopologyDataModelFactory,
@@ -8,7 +8,7 @@ import {
 import { WatchK8sResources } from '@console/internal/components/utils/k8s-watch-hook';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager/src';
-import { ALLOW_SERVICE_BINDING } from '../../../const';
+import { ALLOW_SERVICE_BINDING, INCONTEXT_ACTIONS_SERVICE_BINDING } from '../../../const';
 import { ServiceBindingModel } from '../../../models';
 import { getCreateConnector } from './actions';
 import {
@@ -18,12 +18,14 @@ import {
   getTopologyFilters,
   applyDisplayOptions,
 } from './index';
+import { doContextualBinding } from '../../../utils/connector-utils';
 
 export type OperatorsTopologyConsumedExtensions =
   | TopologyComponentFactory
   | TopologyDataModelFactory
   | TopologyCreateConnector
-  | TopologyDisplayFilters;
+  | TopologyDisplayFilters
+  | PostFormSubmissionAction;
 
 const getOperatorWatchedResources = (namespace: string): WatchK8sResources<any> => {
   return {
@@ -91,4 +93,14 @@ export const operatorsTopologyPlugin: Plugin<OperatorsTopologyConsumedExtensions
       applyDisplayOptions,
     },
   },
+  {
+    type: 'PostFormSubmissionAction',
+    properties: {
+      type: INCONTEXT_ACTIONS_SERVICE_BINDING,
+      callback: doContextualBinding,
+    },
+    flags: {
+      required: [ALLOW_SERVICE_BINDING],
+    },
+  },
 ];

frontend/packages/dev-console/src/const.ts

@@ -20,7 +20,7 @@ export const UNASSIGNED_KEY = '#UNASSIGNED_APP#';
 export const CREATE_APPLICATION_LABEL = 'Create application';
 export const UNASSIGNED_LABEL = 'no application group';
 
-export enum CONNECTOR_INCONTEXT_ACTIONS {
-  /** connects to action for resources */
-  connectsTo = 'connectsTo',
-}
+/** connects to action for resources */
+export const INCONTEXT_ACTIONS_CONNECTS_TO = 'connectsTo';
+/** connector action for service binding */
+export const INCONTEXT_ACTIONS_SERVICE_BINDING = 'serviceBinding';

frontend/packages/dev-console/src/plugin.tsx

@@ -46,7 +46,7 @@ import {
   FLAG_OPENSHIFT_PIPELINE,
   ALLOW_SERVICE_BINDING,
   FLAG_OPENSHIFT_GITOPS,
-  CONNECTOR_INCONTEXT_ACTIONS,
+  INCONTEXT_ACTIONS_CONNECTS_TO,
 } from './const';
 import {
   newPipelineTemplate,
@@ -1162,7 +1162,7 @@ const plugin: Plugin<ConsumedExtensions> = [
   {
     type: 'PostFormSubmissionAction',
     properties: {
-      type: CONNECTOR_INCONTEXT_ACTIONS.connectsTo,
+      type: INCONTEXT_ACTIONS_CONNECTS_TO,
       callback: doConnectsToBinding,
     },
   },

frontend/packages/dev-console/src/utils/__tests__/add-resources-menu-utils.spec.tsx

@@ -13,7 +13,7 @@ import {
   getTopologyResourceObject,
   WORKLOAD_TYPES,
 } from '../../components/topology/topology-utils';
-import { CONNECTOR_INCONTEXT_ACTIONS, UNASSIGNED_KEY } from '../../const';
+import { INCONTEXT_ACTIONS_CONNECTS_TO, UNASSIGNED_KEY } from '../../const';
 import { ImportOptions } from '../../components/import/import-types';
 import {
   MockResources,
@@ -55,7 +55,7 @@ describe('addResourceMenuUtils: ', () => {
     expect(url.searchParams.get('application')).toBe('application-1');
     expect(url.searchParams.get('action')).toBe(
       JSON.stringify({
-        type: CONNECTOR_INCONTEXT_ACTIONS.connectsTo,
+        type: INCONTEXT_ACTIONS_CONNECTS_TO,
         payload: 'apps~v1~DeploymentConfig/nodejs',
       }),
     );

frontend/packages/dev-console/src/utils/add-resources-menu-utils.ts

@@ -1,7 +1,12 @@
 import { K8sResourceKind, referenceFor } from '@console/internal/module/k8s';
 import { KebabOption } from '@console/internal/components/utils';
 import { ImportOptions } from '../components/import/import-types';
-import { QUERY_PROPERTIES, UNASSIGNED_KEY, CONNECTOR_INCONTEXT_ACTIONS } from '../const';
+import {
+  QUERY_PROPERTIES,
+  UNASSIGNED_KEY,
+  INCONTEXT_ACTIONS_CONNECTS_TO,
+  INCONTEXT_ACTIONS_SERVICE_BINDING,
+} from '../const';
 
 const PART_OF = 'app.kubernetes.io/part-of';
 
@@ -23,15 +28,15 @@ export const getAddPageUrl = (
       contextSource &&
         params.append(
           QUERY_PROPERTIES.CONTEXT_ACTION,
-          JSON.stringify({ type: CONNECTOR_INCONTEXT_ACTIONS.connectsTo, payload: contextSource }),
+          JSON.stringify({ type: INCONTEXT_ACTIONS_CONNECTS_TO, payload: contextSource }),
         );
       break;
     case ImportOptions.CONTAINER:
       pageUrl = `/deploy-image/ns/${ns}`;
       contextSource &&
         params.append(
           QUERY_PROPERTIES.CONTEXT_ACTION,
-          JSON.stringify({ type: CONNECTOR_INCONTEXT_ACTIONS.connectsTo, payload: contextSource }),
+          JSON.stringify({ type: INCONTEXT_ACTIONS_CONNECTS_TO, payload: contextSource }),
         );
       break;
     case ImportOptions.CATALOG:
@@ -43,7 +48,7 @@ export const getAddPageUrl = (
       contextSource &&
         params.append(
           QUERY_PROPERTIES.CONTEXT_ACTION,
-          JSON.stringify({ type: CONNECTOR_INCONTEXT_ACTIONS.connectsTo, payload: contextSource }),
+          JSON.stringify({ type: INCONTEXT_ACTIONS_CONNECTS_TO, payload: contextSource }),
         );
       break;
     case ImportOptions.DATABASE:
@@ -60,6 +65,14 @@ export const getAddPageUrl = (
     case ImportOptions.OPERATORBACKED:
       pageUrl = `/catalog/ns/${ns}`;
       params.append('kind', JSON.stringify(['ClusterServiceVersion']));
+      contextSource &&
+        params.append(
+          QUERY_PROPERTIES.CONTEXT_ACTION,
+          JSON.stringify({
+            type: INCONTEXT_ACTIONS_SERVICE_BINDING,
+            payload: contextSource,
+          }),
+        );
       break;
     case ImportOptions.HELMCHARTS:
       pageUrl = `/catalog/ns/${ns}`;