Merge pull request #3958 from andrewballantyne/in-context-application

Service Binding From Add Flow
openshift · Jan 25, 2020 · 293553e · 293553e
2 parents dd15f71 + 38f70e6
commit 293553e
Show file tree

Hide file tree

Showing 8 changed files with 244 additions and 43 deletions.
diff --git a/frontend/packages/dev-console/src/components/QueryFocusApplication.tsx b/frontend/packages/dev-console/src/components/QueryFocusApplication.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { setActiveApplication } from '@console/internal/actions/ui';
+import { RootState } from '@console/internal/redux';
+import { getActiveApplication } from '@console/internal/reducers/ui';
+import { QUERY_PROPERTIES } from '../const';
+
+type StateProps = {
+  application: string;
+};
+type DispatchProps = {
+  onSetApp: (application: string) => void;
+};
+type OwnProps = {
+  children: (desiredApplication?: string) => React.ReactNode;
+};
+
+type QueryFocusApplicationProps = StateProps & DispatchProps & OwnProps;
+
+const QueryFocusApplication: React.FC<QueryFocusApplicationProps> = ({
+  children,
+  application,
+  onSetApp,
+}) => {
+  const originalApp = React.useRef(application);
+  const desiredApplication = new URLSearchParams(window.location.search).get(
+    QUERY_PROPERTIES.APPLICATION,
+  );
+
+  React.useEffect(() => {
+    const originalApplication = originalApp.current;
+    if (desiredApplication && desiredApplication !== originalApplication) {
+      onSetApp(desiredApplication);
+    }
+
+    return () => {
+      if (application !== originalApplication) {
+        onSetApp(originalApplication);
+      }
+    };
+  }, [desiredApplication, onSetApp, originalApp, application]);
+
+  return <>{children(desiredApplication)}</>;
+};
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  (state: RootState): StateProps => ({
+    application: getActiveApplication(state),
+  }),
+  {
+    onSetApp: setActiveApplication,
+  },
+)(QueryFocusApplication);
diff --git a/frontend/packages/dev-console/src/components/import/DeployImage.tsx b/frontend/packages/dev-console/src/components/import/DeployImage.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { Formik } from 'formik';
+import { connect } from 'react-redux';
+import { ALL_APPLICATIONS_KEY } from '@console/shared';
 import { history } from '@console/internal/components/utils';
 import { getActiveApplication } from '@console/internal/reducers/ui';
 import { RootState } from '@console/internal/redux';
-import { connect } from 'react-redux';
-import { ALL_APPLICATIONS_KEY } from '@console/shared';
 import { K8sResourceKind } from '@console/internal/module/k8s';
+import { doContextualBinding } from '../../utils/application-utils';
+import { ALLOW_SERVICE_BINDING } from '../../const';
 import { DeployImageFormData, FirehoseList, Resources } from './import-types';
 import { createOrUpdateDeployImageResources } from './deployImage-submit-utils';
 import { deployValidationSchema } from './deployImage-validation-utils';
@@ -14,15 +16,23 @@ import DeployImageForm from './DeployImageForm';
 export interface DeployImageProps {
   namespace: string;
   projects?: FirehoseList;
+  contextualSource?: string;
 }
 
 interface StateProps {
   activeApplication: string;
+  serviceBindingAvailable: boolean;
 }
 
 type Props = DeployImageProps & StateProps;
 
-const DeployImage: React.FC<Props> = ({ namespace, projects, activeApplication }) => {
+const DeployImage: React.FC<Props> = ({
+  namespace,
+  projects,
+  activeApplication,
+  contextualSource,
+  serviceBindingAvailable,
+}) => {
   const initialValues: DeployImageFormData = {
     project: {
       name: namespace || '',
@@ -129,15 +139,23 @@ const DeployImage: React.FC<Props> = ({ namespace, projects, activeApplication }
       project: { name: projectName },
     } = values;
 
-    const dryRunRequests: Promise<K8sResourceKind[]> = createOrUpdateDeployImageResources(
+    const resourceActions: Promise<K8sResourceKind[]> = createOrUpdateDeployImageResources(
       values,
       true,
-    );
-    dryRunRequests
-      .then(() => {
-        const requests: Promise<K8sResourceKind[]> = createOrUpdateDeployImageResources(values);
-        return requests;
-      })
+    ).then(() => {
+      const requests: Promise<K8sResourceKind[]> = createOrUpdateDeployImageResources(values);
+      return requests;
+    });
+
+    if (contextualSource) {
+      resourceActions
+        .then((resources) =>
+          doContextualBinding(resources, contextualSource, serviceBindingAvailable),
+        )
+        .catch(() => {});
+    }
+
+    resourceActions
       .then(() => {
         actions.setSubmitting(false);
         history.push(`/topology/ns/${projectName}`);
@@ -159,10 +177,14 @@ const DeployImage: React.FC<Props> = ({ namespace, projects, activeApplication }
   );
 };
 
-const mapStateToProps = (state: RootState): StateProps => {
-  const activeApplication = getActiveApplication(state);
+interface OwnProps extends DeployImageProps {
+  forApplication?: string;
+}
+const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => {
+  const activeApplication = ownProps.forApplication || getActiveApplication(state);
   return {
     activeApplication: activeApplication !== ALL_APPLICATIONS_KEY ? activeApplication : '',
+    serviceBindingAvailable: state.FLAGS.get(ALLOW_SERVICE_BINDING),
   };
 };
 

diff --git a/frontend/packages/dev-console/src/components/import/DeployImagePage.tsx b/frontend/packages/dev-console/src/components/import/DeployImagePage.tsx
@@ -2,23 +2,35 @@ import * as React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { PageHeading, Firehose } from '@console/internal/components/utils';
+import { QUERY_PROPERTIES } from '../../const';
+import QueryFocusApplication from '../QueryFocusApplication';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import DeployImage from './DeployImage';
 
 export type DeployImagePageProps = RouteComponentProps<{ ns?: string }>;
 
-const DeployImagePage: React.FunctionComponent<DeployImagePageProps> = ({ match }) => {
+const DeployImagePage: React.FunctionComponent<DeployImagePageProps> = ({ match, location }) => {
   const namespace = match.params.ns;
+  const params = new URLSearchParams(location.search);
+
   return (
     <NamespacedPage disabled variant={NamespacedPageVariants.light}>
       <Helmet>
         <title>Deploy Image</title>
       </Helmet>
       <PageHeading title="Deploy Image" />
       <div className="co-m-pane__body">
-        <Firehose resources={[{ kind: 'Project', prop: 'projects', isList: true }]}>
-          <DeployImage namespace={namespace} />
-        </Firehose>
+        <QueryFocusApplication>
+          {(desiredApplication) => (
+            <Firehose resources={[{ kind: 'Project', prop: 'projects', isList: true }]}>
+              <DeployImage
+                forApplication={desiredApplication}
+                namespace={namespace}
+                contextualSource={params.get(QUERY_PROPERTIES.CONTEXT_SOURCE)}
+              />
+            </Firehose>
+          )}
+        </QueryFocusApplication>
       </div>
     </NamespacedPage>
   );

diff --git a/frontend/packages/dev-console/src/components/import/ImportForm.tsx b/frontend/packages/dev-console/src/components/import/ImportForm.tsx
@@ -7,13 +7,16 @@ import { RootState } from '@console/internal/redux';
 import { connect } from 'react-redux';
 import { ALL_APPLICATIONS_KEY } from '@console/shared';
 import { NormalizedBuilderImages, normalizeBuilderImages } from '../../utils/imagestream-utils';
+import { doContextualBinding } from '../../utils/application-utils';
+import { ALLOW_SERVICE_BINDING } from '../../const';
 import { GitImportFormData, FirehoseList, ImportData, Resources } from './import-types';
 import { createOrUpdateResources, handleRedirect } from './import-submit-utils';
 import { validationSchema } from './import-validation-utils';
 
 export interface ImportFormProps {
   namespace: string;
   importData: ImportData;
+  contextualSource?: string;
   imageStreams?: FirehoseList;
   projects?: {
     loaded: boolean;
@@ -24,15 +27,18 @@ export interface ImportFormProps {
 export interface StateProps {
   perspective: string;
   activeApplication: string;
+  serviceBindingAvailable: boolean;
 }
 
 const ImportForm: React.FC<ImportFormProps & StateProps> = ({
   namespace,
   imageStreams,
   importData,
+  contextualSource,
   perspective,
   activeApplication,
   projects,
+  serviceBindingAvailable,
 }) => {
   const initialValues: GitImportFormData = {
     name: '',
@@ -144,8 +150,22 @@ const ImportForm: React.FC<ImportFormProps & StateProps> = ({
       project: { name: projectName },
     } = values;
 
-    createOrUpdateResources(values, imageStream, createNewProject, true)
-      .then(() => createOrUpdateResources(values, imageStream))
+    const resourceActions = createOrUpdateResources(
+      values,
+      imageStream,
+      createNewProject,
+      true,
+    ).then(() => createOrUpdateResources(values, imageStream));
+
+    if (contextualSource) {
+      resourceActions
+        .then((resources) =>
+          doContextualBinding(resources, contextualSource, serviceBindingAvailable),
+        )
+        .catch(() => {});
+    }
+
+    resourceActions
       .then(() => {
         actions.setSubmitting(false);
         handleRedirect(projectName, perspective);
@@ -178,12 +198,14 @@ const ImportForm: React.FC<ImportFormProps & StateProps> = ({
   );
 };
 
-const mapStateToProps = (state: RootState): StateProps => {
+type OwnProps = ImportFormProps & { forApplication?: string };
+const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => {
   const perspective = getActivePerspective(state);
-  const activeApplication = getActiveApplication(state);
+  const activeApplication = ownProps.forApplication || getActiveApplication(state);
   return {
     perspective,
     activeApplication: activeApplication !== ALL_APPLICATIONS_KEY ? activeApplication : '',
+    serviceBindingAvailable: state.FLAGS.get(ALLOW_SERVICE_BINDING),
   };
 };
 

diff --git a/frontend/packages/dev-console/src/components/import/ImportPage.tsx b/frontend/packages/dev-console/src/components/import/ImportPage.tsx
@@ -3,7 +3,9 @@ import { RouteComponentProps } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { PageHeading, Firehose, FirehoseResource } from '@console/internal/components/utils';
 import { ImageStreamModel } from '@console/internal/models';
+import { QUERY_PROPERTIES } from '../../const';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
+import QueryFocusApplication from '../QueryFocusApplication';
 import ImportForm from './ImportForm';
 import { ImportTypes, ImportData } from './import-types';
 
@@ -88,17 +90,26 @@ const ImportPage: React.FunctionComponent<ImportPageProps> = ({ match, location
   }
 
   return (
-    <NamespacedPage disabled variant={NamespacedPageVariants.light}>
-      <Helmet>
-        <title>{importData.title}</title>
-      </Helmet>
-      <PageHeading title={importData.title} />
-      <div className="co-m-pane__body">
-        <Firehose resources={resources}>
-          <ImportForm namespace={namespace || preselectedNamespace} importData={importData} />
-        </Firehose>
-      </div>
-    </NamespacedPage>
+    <QueryFocusApplication>
+      {(application) => (
+        <NamespacedPage disabled variant={NamespacedPageVariants.light}>
+          <Helmet>
+            <title>{importData.title}</title>
+          </Helmet>
+          <PageHeading title={importData.title} />
+          <div className="co-m-pane__body">
+            <Firehose resources={resources}>
+              <ImportForm
+                forApplication={application}
+                contextualSource={searchParams.get(QUERY_PROPERTIES.CONTEXT_SOURCE)}
+                namespace={namespace || preselectedNamespace}
+                importData={importData}
+              />
+            </Firehose>
+          </div>
+        </NamespacedPage>
+      )}
+    </QueryFocusApplication>
   );
 };
 

diff --git a/frontend/packages/dev-console/src/components/topology/topology-utils.ts b/frontend/packages/dev-console/src/components/topology/topology-utils.ts
@@ -30,6 +30,7 @@ import {
   createServiceBinding,
   removeServiceBinding,
   edgesFromServiceBinding,
+  getOperatorBackedServiceKindMap,
 } from '../../utils/application-utils';
 import { TopologyFilters } from './filters/filter-utils';
 import {
@@ -377,18 +378,8 @@ export const transformTopologyData = (
   filters?: TopologyFilters,
 ): TopologyDataModel => {
   const installedOperators = _.get(resources, 'clusterServiceVersions.data');
-  let operatorBackedServiceKindMap: OperatorBackedServiceKindMap;
+  const operatorBackedServiceKindMap = getOperatorBackedServiceKindMap(installedOperators);
   const serviceBindingRequests = _.get(resources, 'serviceBindingRequests.data');
-  if (installedOperators) {
-    operatorBackedServiceKindMap = installedOperators.reduce((kindMap, csv) => {
-      _.get(csv, 'spec.customresourcedefinitions.owned', []).forEach((crd) => {
-        if (!(crd.kind in kindMap)) {
-          kindMap[crd.kind] = csv;
-        }
-      });
-      return kindMap;
-    }, {});
-  }
 
   let topologyGraphAndNodeData: TopologyDataModel = {
     graph: { nodes: [], edges: [], groups: [] },

diff --git a/frontend/packages/dev-console/src/const.ts b/frontend/packages/dev-console/src/const.ts
@@ -1,3 +1,11 @@
 export const ALLOW_SERVICE_BINDING = 'ALLOW_SERVICE_BINDING';
 export const FLAG_OPENSHIFT_PIPELINE = 'OPENSHIFT_PIPELINE';
 export const CLUSTER_PIPELINE_NS = 'openshift';
+
+/** URL query params that adjust scope / purpose of the page */
+export enum QUERY_PROPERTIES {
+  /** For defining a contextual application group (ie, add new workload into this application group) */
+  APPLICATION = 'application',
+  /** For defining a contextual source of the redirect (ie, connect a new workload from this contextual source) */
+  CONTEXT_SOURCE = 'contextSource',
+}