From 8feed8f67e2a88e4eb2ef84bbfa3269a9d11cd88 Mon Sep 17 00:00:00 2001
From: Divyanshi Gupta <divyanshigupta3295@gmail.com>
Date: Fri, 29 Jul 2022 15:57:16 +0530
Subject: [PATCH] Fix service-binding modal sub-title text

---
 .../console-app/locales/en/console-app.json      |  1 +
 .../service-binding/CreateServiceBindingForm.tsx | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/console-app/locales/en/console-app.json b/frontend/packages/console-app/locales/en/console-app.json
index 27d1c602319..3c4aa2a7cdc 100644
--- a/frontend/packages/console-app/locales/en/console-app.json
+++ b/frontend/packages/console-app/locales/en/console-app.json
@@ -195,6 +195,7 @@
   "No bindable services available": "No bindable services available",
   "To create a Service binding, first create a bindable service.": "To create a Service binding, first create a bindable service.",
   "Select Service": "Select Service",
+  "Connect <1>{{sourceName}}</1> to service <3>{{targetName}}</3>.": "Connect <1>{{sourceName}}</1> to service <3>{{targetName}}</3>.",
   "Select a service to connect to.": "Select a service to connect to.",
   "Create": "Create",
   "Required": "Required",
diff --git a/frontend/packages/console-app/src/components/modals/service-binding/CreateServiceBindingForm.tsx b/frontend/packages/console-app/src/components/modals/service-binding/CreateServiceBindingForm.tsx
index 1995cfb7547..6c0c0260439 100644
--- a/frontend/packages/console-app/src/components/modals/service-binding/CreateServiceBindingForm.tsx
+++ b/frontend/packages/console-app/src/components/modals/service-binding/CreateServiceBindingForm.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TextInputTypes, Title } from '@patternfly/react-core';
 import { FormikProps, FormikValues } from 'formik';
 import * as _ from 'lodash';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 import {
   ModalTitle,
@@ -30,12 +30,24 @@ const CreateServiceBindingForm: React.FC<FormikProps<FormikValues> &
   errors,
 }) => {
   const { t } = useTranslation();
+
+  const sourceName = source.metadata.name;
+  const targetName = target?.metadata?.name;
+
+  const title = target ? (
+    <Trans t={t} ns="console-app">
+      Connect <b>{{ sourceName }}</b> to service <b>{{ targetName }}</b>.
+    </Trans>
+  ) : (
+    t('console-app~Select a service to connect to.')
+  );
+
   return (
     <form onSubmit={handleSubmit} className="modal-content">
       <ModalTitle>{t('console-app~Create Service Binding')}</ModalTitle>
       <ModalBody>
         <Title headingLevel="h2" size="md" className="co-m-form-row">
-          {t('console-app~Select a service to connect to.')}
+          {title}
         </Title>
         <FormSection fullWidth>
           <InputField