Merge pull request #7084 from sahil143/odc-5051

add support for Operator Backed SBR through topology inContext

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

@@ -13,3 +13,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(

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', () => {
@@ -48,7 +48,7 @@ describe('graphActions: ', () => {
     const connectorSource = new OdcBaseNode();
     connectorSource.setData(topologyDataModel.nodes[0].data);
     const actions = graphActions(graphData, connectorSource);
-    expect(actions).toHaveLength(4);
+    expect(actions).toHaveLength(3);
   });
 
   it('should return the event source menu item when connector source is passed and event source is enabled', () => {
@@ -62,7 +62,7 @@ describe('graphActions: ', () => {
       knativeTopologyDataModel.topology['e187afa2-53b1-406d-a619-cf9ff1468031'],
     );
     const actions = graphActions(graphData, connectorSource);
-    expect(actions).toHaveLength(5);
+    expect(actions).toHaveLength(4);
     expect(actions.filter((action) => action.label === 'Event Source')).toHaveLength(1);
   });
 
@@ -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,
@@ -1178,7 +1178,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}`;